var initCourseTab = (function(doc) {
    var oCourseTablks = doc.getElementsByClassName('course-tab-lk'),
        oCourseTablksLen = oCourseTablks.length,
        courseData = JSON.parse(doc.getElementById('J_data').innerHTML),
        oSearchInput = doc.getElementById('js-search-input'),
        cardItemTpl = doc.getElementById('J-cardItemTpl').innerHTML
    oCourseCardList = doc.getElementsByClassName('course-card-list')[0]
    return {
        searchCourse: function() {
            var val = oSearchInput.value,
                len = val.length
            console.log(val);
            if (len > 0) {
                oCourseCardList.innerHTML = this.makeList(this.searchData(courseData, val))
            } else {
                this.restoreList();
            }
        },
        tabClick: function(e) {
            var e = e || window.event,
                tar = e.target || e.srcElement,
                className = tar.className;
            if (className === 'course-tab-lk') {
                var field = tar.getAttribute('data-field')
                for (var i = 0; i < oCourseTablksLen; i++) {
                    item = oCourseTablks[i];
                    item.className = 'course-tab-lk';
                }
                tar.className += ' current'
                oCourseCardList.innerHTML = this.makeList(this.filterData(field, courseData))

            }
        },
        initCourseLisst: function() {
            oCourseCardList.innerHTML = this.makeList(this.filterData('all', courseData))
        },
        restoreList: function() {
            oCourseCardList.innerHTML = this.makeList(courseData);
            for (var i = 0; i < oCourseTablksLen; i++) {
                item = oCourseTablks[i];
                item.className = 'course-tab-lk';
            }
            oCourseTablks[0].className += ' current'
        },
        makeList: function(data) {
            var list = '';
            data.forEach(function(elem) {
                list += cardItemTpl.replace(/{{(.*?)}}/g, function(node, key) {
                    return {
                        img: elem.img,
                        courseName: elem.course,
                        ifFree: elem.is_free === '1' ? 'free' : 'vip',
                        price: 889,
                        hours: elem.classes
                    }[key]
                })

            })
            return list
        },
        filterData: function(field, data) {
            return data.filter(function(elem) {
                switch (field) {
                    case 'all':
                        return true;
                        break;
                    case 'free':
                        return elem.is_free === '1'
                        break;
                    case 'vip':
                        return elem.is_free === '0'
                        break;
                    default:
                        return true;
                        break;
                }
            })
        },
        searchData: function(data, keyWord) {
            return data.reduce(function(prev, elem) {
                var res = elem.course.indexOf(keyWord);
                if (res !== -1) {
                    prev.push(elem)
                }
                return prev
            }, [])
        }
    }
})(document);
(function(doc) {
    var oSearchInput = doc.getElementById('js-search-input'),
        oTabList = doc.getElementsByClassName('js-course-tab-list')[0]
    var init = function() {
        bindEvent();
        initCourseTab.initCourseLisst();
    }

    function bindEvent() {
        oSearchInput.addEventListener('input', initCourseTab.searchCourse.bind(initCourseTab));
        oTabList.addEventListener('click', initCourseTab.tabClick.bind(initCourseTab))
    }
    init()
})(document)